<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div class="myDiv1">这是一个测试div</div>
<div class="myDiv1">这是一个测试div</div>
<div id="myDivId">这是一个测试div-id11</div>
<div id="myDivId">这是一个测试div-id22</div>
<a href="">测试a标签1</a>
<a href="">测试a标签2</a>
<ul>
    <li class="item">
        <div class="item-div">
            <input type="text" id="inp">
        </div>
    </li>
    <li>tiem2</li>
    <li class="item">
        <div class="item-div">
            <input type="text" id="inp">
        </div>
    </li>
    <li>item4</li>
    <li class="item">
        <div class="item-div">
            <input type="text" id="inp">
        </div>
    </li>
</ul>

<body>
    <script>
        // //创建dom元素----document.createElement
        // var div = document.createElement('div')
        // var ul = document.createElement('ul')

        // var li1 = document.createElement('li')
        // var li2 = document.createElement('li')

        // //增加dom元素----appendChild
        // div.innerHTML = '这是一段测试文本'
        // document.body.appendChild(div)

        // li1.innerHTML = 'item1'
        // li2.innerHTML = 'item2'

        // ul.appendChild(li1)
        // ul.appendChild(li2)

        // // ul.innerHTML = '这是一个测试列表'

        // document.body.appendChild(ul)

        // console.log(ul)
        // //删除dom元素---removeChild
        // // ul.removeChild(li1)
        // // document.body.removeChild(ul)
        // //dom是响应式的结构

        // //修改dom元素(修改dom的内容---innerHTML，修改dom的选择器)

        // div.className = 'my-div'
        // div.id = 'my-div'
        // 查找dom元素

        // 按class查找--document.getElementsByClassName
        var divs = document.getElementsByClassName('myDiv1')
        console.log(divs[0])
        console.log(divs[1])

        // 通过id查找
        var idDiv = document.getElementById('myDivId')

        console.log(idDiv)

        // 通过元素名|标签名查找
        var links = document.getElementsByTagName('a')

        console.log(links)

        var divs = document.getElementsByTagName('div')

        console.log(divs)

        // 按选择器查找document.querySelector | document.querySelectorAll
        // var inp = document.querySelector('ul li div input')
        var inp = document.querySelector('ul .item .item-div #inp')

        console.log(inp)

        var inps = document.querySelectorAll('ul .item .item-div #inp')

        console.log(inps)

        btn1.onclick = function(e){
            console.log()
        }
    </script>
</body>

</html>